<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三栏布局1</title>
    <style type="text/css">
        body{ width:1006px;
            align-items: center;
            justify-content: space-between;
            border-style:inset;
            color: aliceblue;
           box-sizing: border-box;
            margin:0 auto;
        }
        .text{
            width:334px;
            height: 300px;
            align-items: center;
            justify-content: space-between;
            border-style:inset;
            color: aliceblue;
            box-sizing: border-box;
            float:left;

        }
        .z{
            /*width:100%;*/
            /*中间栏不要设宽度，包括100%*/
            width:334px;
            height: 300px;
            width:334px;
            height: 300px;
            align-items: center;
            justify-content: space-between;

            border-style:inset;
            color: aliceblue;
            box-sizing: border-box;


            margin:0 334px;
        }
        .y{
            width: 334px;
            height: 300px;
            width:334px;
            height: 300px;
            align-items: center;
            justify-content: space-between;

            border-style:inset;
            color: aliceblue;
            box-sizing: border-box;


            float: right;
        }
    </style>
</head>
<body>
<!-- 左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后 -->
<!-- 中间栏实际宽度是当前屏的100% -->
<div class="text">
    <font color="black">
        <h2>求职信息<a href="request-more.html">更多</a></h2>
    </font>
</div>
<div class="y">
    <font color="black">
        <h2>招聘信息<a href="company-more.html">更多</a></h2>
    </font>
</div>
<div class="z">
    <font color="black">
        <h2>新闻公告<a href="news-more.html">更多</a></h2>
    </font>
</div>
</body>
<script src="/js/func.js"></script>
<script src="/js/header.js"></script>
<script src="/js/index.js"></script>
</html>